<template>
  <view class="home">
    <scroll-view scroll-x class="categories">
      <view
        class="category"
        v-for="(category, index) in categories"
        :key="category.id"
      >
        {{ category.name }}
      </view>
    </scroll-view>
  </view>
</template>

<script>
import categories from "../../mock/categories";
import fetchData from "../../utils/utils";
export default {
  data() {
    return {
      //categories
      categories: [],
    };
  },
  // uniapp  生命周期函数
  async onLoad() {
	await this.fetchCategories();
  },
  methods: {
    async fetchCategories() {
       try {
			const { data }  = await fetchData({
					method:"post",
					url:"/category/getCategories"
			});
			this.categories = data;
       } catch (error) {
		   console.log('error==',error.message);
			uni.showToast({
				title:"获取数据失败"+error.message,
				icon:'error',
				duration:2000
			})
       }
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  .categories {
    position: fixed;
    left: 0;
    top: var(--window-top);
    z-index: 100;
    white-space: nowrap;
    width: 100%;
    height: 100rpx;
	overflow-y: hidden;
    background-color: #f5f5f5;
	/* 全局隐藏滚动条（适用于 WebKit 浏览器） */
	::v-deep ::-webkit-scrollbar {
		display:none;
	}
    .category {
      display: inline-block;
      height: 100%;
      line-height: 100rpx;
      padding: 0 20rpx;
      text-align: center;
      border: 1px solid #c5c5c5;
      box-sizing: border-box;
    }
    view + view {
      border-right-width: 0;
    }
  }
}
</style>
